<template>
    <div>
        <ul>
            <li v-for="(item,index) in list" :key="index">
                <!-- <router-link :to="`/newsContent/${index}`">{{item}}</router-link> -->
                <!-- <router-link :to="`/newsContent?aid=${index}`">{{item}}</router-link> -->
                <router-link :to="{name:'content',query:{aid:index}}">{{item}}</router-link>
            </li>
        </ul>
        <br>
        <br>
        <button @click="this.$router.push({name:'content',query:{aid:222}})">Js跳转到content--命名路由</button>
        <br>
        <br>
        点击数----{{count}}
        <br>
        <br>
        <ul>
            <li v-for="(item,index) in xlist" :key="index">{{item}}</li>
        </ul>
        <br>
        <br>
        <li v-for="(item,index) in mlist" :key="index">{{item}}</li>
        <br>
        <br>
        
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { mapState } from 'vuex'
// data数据的接口
// interface News{
//     title:string,
//     description:string,
//     count:number|string,
//     content?:string
// }
// interface News{
//     list:string[]
// }
// let newsData:News = {
//     title:'我是一个新闻',
//     description:'我是一个新闻的描述',
//     count:12
// }

// let newsData = {
//     title:'我是一个新闻',
//     description:'我是一个新闻的描述',
//     count:12
// } as News

export default defineComponent({
    data(){
        // return newsData
        return {
            list:[]
        }
    },
    methods:{
        // setCount():void{
        //    this.count = 123
        // },
        // setTitle(title:string):void{
        //     this.title = title;
        // }
    },
    mounted(){
        // this.setTitle("我是生命周期函数改变的数据")
        for(let i = 0;i<10;i++){
            this.list.push(`我是第${i}个新闻`)
        }
    },
    // computed:{
    //     reverseTitle():string{
    //         return this.title.split("").reverse().join("")
    //     }
    // }
    computed:{
        ...mapState({
            count:(state:any)=>state.count,
            xlist:(state:any)=>state.list
        }),
        mlist(){
            return this.$store.state.news.list
        }
    }
})
</script>
<style lang="scss">
// npm install -d sass-loader node-sass

</style>
